<template>
  <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script >
import { defineComponent, ref, reactive,defineEmits} from "vue";
import * as echarts from "echarts";

export default defineComponent({
  name: "echart",
  props:{
    chartinfo: Array,
  },
  components: {
  },
  setup(props,context){
    const newProps = reactive({ ...props })
    console.log(' newProps',newProps)
    //  defineProps({
    // //子组件接收父组件传递过来的值
    //         chartinfo: {
    //         type: Array,
    //         default:'----'
    //     }
    // })
    
    //使用父组件传递过来的值
    // const {chartinfo} =toRefs(props)
    // console.log( chartinfo)
    let indexgl=ref(1000) 
    const myChart = ref();  //也可以用const myChart = ref<any>();
    // console.log(myChart);
    const myCharts = ref();
    const emit = defineEmits(['echartclick'])
    // console.log(emit)
    const echartclick=function (params) {
        
        myCharts.value.dispatchAction({
        type: 'downplay',
       seriesIndex: 0,
        })
        myCharts.value.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
        indexgl.value=params.dataIndex
        //在这里可以拿到数据然后调用需要调用的方法
         context.emit('echartclick',params.dataIndex)

      }
      
    
   
    
    
  const highlight=function(val){
    indexgl.value=val
    console.log('sdasd',val)
    myCharts.value.dispatchAction({
        type: 'downplay',
       seriesIndex: 0,
        })
    myCharts.value.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: val
    })
  }
    const resultechart =(datasechart)=>{

      console.log('dsfsd')
      setTimeout(() => {
      // 绘制图表
      myCharts.value = echarts.init(myChart.value);
      myCharts.value.on("click", echartclick);
      myCharts.value.on("mouseover", function(params){
          myCharts.value.dispatchAction({
          type: 'downplay',
        seriesIndex: 0,
          })
          myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
       })
      });
      myCharts.value.on("mouseout", function(params){
      
        console.log(indexgl.value)
          myCharts.value.dispatchAction({
          type: 'downplay',
        seriesIndex: 0,
          })
           myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: indexgl.value
       })
          
      });
      myCharts.value.dispatchAction({
        type: 'downplay',
       seriesIndex: 0,
        })
      myCharts.value.setOption({
  // tooltip: {
  //   trigger: 'item'
  // },
  legend: {
    show:false,
    top: '5%',
    left: 'center'
  },
  
  series: [
    {
      name: '项目进度',
      // silent: true,
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      color:['#34AA27','#ff5300','#ffffff'],
      // silent: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:datasechart
    }
  ]
}
);
    }, 10);


    }

    return {
      resultechart ,
      myChart,
      emit,
      highlight,
      myCharts,
      indexgl,
    };
  }
});
</script>